<template>
	<view>
		<view class="site_menu open">
			<view class="site_logo">
				<image src="/static/images/entryscreen/upvsdown.svg" mode="widthFix">
			</view>
			<view class="close" @click="handleMaskClick"></view>
			<view class="account_box" style="z-index: initial;">

				<view class="balance_amount" v-if="connect">
					<view class="balance_box">

						<!-- <image class="social_wallet_connect_btn" src="../../static/images/common/wallet.png" mode="widthFix"
								@click="openWallet"></image> -->


						<view class="user-balance-wrap">
							<view class="balance-title">
								<text>USDT{{$t('balance')}}</text>
							</view>
							<view class="amount-wrap">
								<view class="icon-matic"></view>
								<view class="amount">
									<text style="transition: background-color 0.8s ease-out 0s, color, opacity;"
										class="amount-number">{{amount}}</text>
									<!-- <text
										style="transition: background-color 0.8s ease-out 0s, color, opacity;font-size: 20rpx;margin-top: 10rpx;">RHD</text> -->
								</view>
							</view>
						</view>
						<!-- <view class="refresh-balance-button" @click="freshAmount"></view> -->
					</view>
				</view>

				<view class="balance_amount" @click="connectPurse" v-else>
					<image class="balance_amount_wallet_connect" src="/static/images/entryscreen/wallet_btn.png"
						mode="widthFix">
				</view>


				<!-- <view class="balance_amount" style="z-index: 5;">
					<image class="balance_amount_wallet_connect" mode="widthFix"
						src="/static/images/entryscreen/wallet_btn.png">
				</view> -->

				<view class="change-avatar" @click="setAvatar">
					<image src="/static/images/entryscreen/camera.svg" class="change_pic" mode="widthFix">
						<text class="change-avatar-txt">{{$t('Change-avatar')}}</text>
				</view>
				<view class="language-container" @click="setLanguage">
					<image class="chevron-down" src="/static/images/entryscreen/chevron-down.svg" mode="widthFix">
						<image class="flag" :src="languageList[select].url" alt="flag" mode="widthFix">
							<text class="language-container__lang">{{languageList[select].name}}</text>
				</view>
				<view class="image_bubble" style="z-index: 8888;">
					<image v-if="avatar" :src="avatar" class="user_avatar" mode="widthFix"></image>
					<image v-else src="/static/images/entryscreen/robit.png" class="user_avatar" mode="widthFix">
					</image>
					<view class="country">
						<image :src="languageList[select].url" mode="widthFix">
					</view>
					<view class="address_row" @tap="clipboard">
						<view class="address">({{address}})</view>
					</view>
				</view>
			</view>
			<view class="links_scroll">
				<view class="links_scroll_box">
					<view class="cat_title">{{$t('Join-our')}}</view>
					<view class="socials">
						<view class="socials-img"
							@click="">
							<image src="/static/images/entryscreen/facebook.png" mode="widthFix" class="socials-img">
						</view>
						<view class="socials-img"
							@click="">
							<image src="/static/images/entryscreen/instagram.png" mode="widthFix" class="socials-img">
						</view>
						<view class="socials-img">
							<image src="/static/images/entryscreen/telegram.png" mode="widthFix" class="socials-img">
						</view>
						<view class="socials-img"
							@click="goToWeb('https://x.com/lee20171819?t=7detyQtxBkbq9SiLnwVo9Q&s=09')">
							<image src="/static/images/entryscreen/twitter.png" mode="widthFix" class="socials-img">
						</view>
						
					</view>
					<view class="cat_title">{{$t('shop')}}</view>
					<navigator class="page_link leaderboard" url="/pages/shop/goods">
						<text class="page_link_title">
							{{$t('shop-order')}}
						</text>
					</navigator>
					<navigator class="page_link leaderboard" url="/pages/shop/orderList">
						<text class="page_link_title">
							{{$t('my-order')}}
						</text>
					</navigator>
					<view class="cat_title">{{$t('activities')}}</view>
					<navigator class="page_link trades_history" url="/pages/records/records">
						<text class="page_link_title">
							{{$t('Transaction-records')}}
						</text>
					</navigator>
					<navigator class="page_link jackpot_monthly" url="/pages/records/bonusRecords">
						<text class="page_link_title">
							{{$t('bonus-records')}}
						</text>
					</navigator>
					<view class="cat_title">{{$t('My-promotion')}}</view>
					<navigator class="page_link share_links" url="/pages/dashboard/share_links"><text
							class="page_link_title">
							{{$t('Promotion-link')}}
						</text>
					</navigator>
					<navigator class="page_link share" url="/pages/dashboard/dashboard"><text class="page_link_title">
							{{$t('control-panel')}}
						</text></navigator>

					<navigator class="page_link share_report" url="/pages/dashboard/share_report"><text
							class="page_link_title">
							{{$t('Income-statement')}}
						</text></navigator>
					<view class="cat_title">Rich List</view>
					<navigator class="page_link jackpot_weekly" url="/weekly_jackpot">
						<text class="page_link_title">
							Weekly Ranking
						</text>
					</navigator>
					<navigator class="page_link jackpot_monthly" url="/monthly_jackpot"><text class="page_link_title">
							Monthly Ranking
						</text></navigator>
					<view class="page_link jackpot_history"
						@click="goToWeb('https://trade.playnance.com/trade?utm_source=tokenpocket')"><text
							class="page_link_title">
							Playnance
						</text></view>
					<view class="cat_title">{{$t('datas')}}</view>
					<navigator class="page_link faq" url="/pages/dashboard/faq"><text class="page_link_title">
							{{$t('question')}}
						</text></navigator>
					<navigator class="page_link tutorial" url="/pages/down/down"><text class="page_link_title">
							{{$t('down')}}
						</text></navigator>
					<navigator class="page_link privacy_policy" url="/policy"><text class="page_link_title">
							{{$t('Privacy-Policy')}}
						</text></navigator>
					<navigator class="page_link contact" url="/contact_us"><text class="page_link_title">
							Contact Us
						</text></navigator>
					<view class="cat_title">{{$t('setting')}}</view>
					<!-- <view class="sound_row sound_effects">
						<view class="title">音效</view>
						<view class="switch on">开</view>
					</view>
					<view class="sound_row voiceover">
						<view class="title">配音</view>
						<view class="switch on">开</view>
					</view>
					<view class="sound_row background_music">
						<view class="title">背景音乐</view>
						<view class="switch on">开</view>
					</view> -->
					<view class="logout" @click="outWallet()">
						<view class="page_link_title">{{$t('close-wallet')}}</view>
					</view>
					<navigator url="" target="_blank" class="bottom_logo">
						<image class="playnance_logo" src="/static/images/common/logo.png">
							<view class="version_text">{{$t('Supported')}}</view>
					</navigator>
				</view>
			</view>


			<view class="site_menu_popup_wrap" v-if="showLanguage">
				<view class="site_menu_popup">
					<image src="/static/images/entryscreen/combined-shape@3x.png" class="site_menu_popup_bg">
						<view class="site_menu_popup_content_box">
							<view class="site_menu_popup_content_btn" v-for="(item,index) in languageList" :key="index"
								@click="selectLanguage(index)">
								<image :src="item.url" class="entry_screen_active_lang_flag_">
									<view class="site_menu_content_lang_dialog"><text>{{item.name}}</text></view>
							</view>
						</view>
				</view>
			</view>

		</view>
		<view class="site_menu_dialog open" v-if="show">
			<view class="user_profile_wrap">
				<view class="user_profile_close_btn" @click="closeUpload">
					<view>
						<image class="user_profile_close_img" src="/static/images/entryscreen/closebutton.png">
					</view>
				</view>
				<view class="user_profile_header_box">
					<view class="user_profile_header">{{$t('Change-your-profile-picture')}}</view>
				</view>
				<view class="user_profile_block">
					<view class="user_profile_imgs">
						<view class="user_profile_img_block" v-for="(item,index) in imgs" :key="index">
							<image :src="item.pic" class="user_profile_img_block_pic" mode="widthFix"
								@click="selectAvatar(index)"></image>
						</view>
					</view>


				</view>
				<view class="user_profile_form_box">
					<view class="user_profile_image_box">
						<image class="user_profile_user_avatar_img" :src="avatar" mode="widthFix"><input
								class="user_profile_file_input" id="uploadButton" type="file">
							<view class="user_profile_upload_btn" @click="changeAvatar">
								<image class="user_profile_upload_img" src="/static/images/entryscreen/camera_gold.svg"
									mode="widthFix">
							</view>
					</view>
					<view class="user_profile_form_desc_text">{{$t('button-after-completion')}}</view>
					<view class="user_profile_apply_box">
						<view class="user_profile_apply_btn" style="opacity: 0.5;" @click="saveAvatar">
							{{$t('Apply-changes')}}
						</view>
					</view>
				</view>
			</view>
			<tui-tips ref="toast" position="center"></tui-tips>
		</view>

	</view>
</template>

<script>
	import yui from '@/common/httpRequest';
	const copys = require("@/components/common/tui-clipboard/tui-clipboard.js")
	export default {
		name: 'headNav',
		props: {
			//是否固定
			show: {
				type: Boolean,
				default: false
			},
		},

		mounted() {
			/* 获取钱包余额 */
			this.getWallet();
			this.address = yui.hidden(uni.getStorageSync("yy_wallet").address, 6, 6)
			this.select = uni.getStorageSync('langname') ? uni.getStorageSync('langname') : 0
			this.avatar = yui.getUserInfoData();
		},
		data() {
			return {
				showLanguage: false,

				select: 1,
				amount: 0.00,
				connect: true,
				address: '',
				avatar: null,
				show: false,
				languageList: [{
						name: 'English',
						url: "/static/images/entryscreen/usa.svg"
					},
					{
						name: '简体中文',
						url: "/static/images/entryscreen/china.svg"
					},
					{
						name: '繁體中文',
						url: "/static/images/entryscreen/hongkong.svg"
					},
					{
						name: '日本語',
						url: "/static/images/entryscreen/japan.svg"
					},
					{
						name: '한국어',
						url: "/static/images/entryscreen/southkorea.svg"
					},
					{
						name: 'ภาษาไทย',
						url: "/static/images/entryscreen/thailand.svg"
					},
					{
						name: 'Bahasa Mel',
						url: "/static/images/entryscreen/malaysia.svg"
					},
					{
						name: 'tiếng việt',
						url: "/static/images/entryscreen/vietnam.svg"
					},
					{
						name: 'Bahasa Ind',
						url: "/static/images/entryscreen/indonesia.svg"
					},
					{
						name: 'العربية',
						url: "/static/images/entryscreen/saudi.svg"
					},
					{
						name: 'português',
						url: "/static/images/entryscreen/brazil.svg"
					},
					{
						name: 'Русский',
						url: "/static/images/entryscreen/russia.svg"
					},
					{
						name: 'Deutsch',
						url: "/static/images/entryscreen/germany.svg"
					},
					{
						name: 'français',
						url: "/static/images/entryscreen/france.svg"
					},
					{
						name: 'italiano',
						url: "/static/images/entryscreen/italy.svg"
					},
					{
						name: 'Türkçe',
						url: "/static/images/entryscreen/turkey.svg"
					},
					{
						name: 'Español',
						url: "/static/images/entryscreen/spain.svg"
					},
					{
						name: 'Język polski',
						url: "/static/images/entryscreen/poland.svg"
					},
					{
						name: 'हिन्दी',
						url: "/static/images/entryscreen/india.svg"
					},
					{
						name: 'Українська',
						url: "/static/images/entryscreen/ukraine.svg"
					}
				],
				imgs: [{
					pic: '/static/images/common/svg.svg'
				}, {
					pic: '/static/images/common/svg1.svg'
				}, {
					pic: '/static/images/common/svg2.svg'
				}, {
					pic: '/static/images/common/svg3.svg'
				}, {
					pic: '/static/images/common/svg4.svg'
				}, {
					pic: '/static/images/common/svg5.svg'
				}, {
					pic: '/static/images/common/svg6.svg'
				}, {
					pic: '/static/images/common/svg7.svg'
				}, {
					pic: '/static/images/common/svg8.svg'
				}, {
					pic: '/static/images/common/svg9.svg'
				}, {
					pic: '/static/images/common/svg10.svg'
				}, {
					pic: '/static/images/common/svg11.svg'
				}, {
					pic: '/static/images/common/svg12.svg'
				}, {
					pic: '/static/images/common/svg13.svg'
				}, {
					pic: '/static/images/common/svg14.svg'
				}, {
					pic: '/static/images/common/svg15.svg'
				}, {
					pic: '/static/images/common/svg16.svg'
				}, {
					pic: '/static/images/common/svg17.svg'
				}]
			};
		},
		methods: {
			clipboard: function(event) {
				this.tui.toast('复制成功')
				uni.setClipboardData({
					data: this.address,
					success: function() {
						console.log('复制成功');
					}
				});
			},
			selectAvatar(index) {
				this.avatar = this.imgs[index].pic
				this.tui.setUserInfoData(this.imgs[index].pic);
			},
			goToWeb(url) {
				window.open(url)
			},
			saveAvatar() {

				let uper = this.tui.request('/api/v1/user/updateAvatr', 'post', {
					avatar: this.avatar
				}, 1000, 1, '');
				Promise.resolve(uper).then((value) => {
					if (value.status == 200) {
						this.$emit('showTips', this.$t('saveSuccess'), 'green');
						// this.avatar = yui.interfaceUrl() + value.result
						this.tui.setUserInfoData(this.avatar);
					}
				})

			},

			async getWallet() {
				try {
					let balance = await this.web3Rpc.getErc20Balance('RHD')
					this.amount = Math.round(parseFloat(balance) * 100) / 100;

				} catch (e) {
					//TODO handle the exception
				}

			},
			selectLanguage(index) {
				switch (index) {
					case 0:
						uni.setLocale('en');
						this.$i18n.locale = 'en';
						break;
					case 1:
						uni.setLocale('zh-Hans');
						this.$i18n.locale = 'zh-Hans';
						break;
					case 2:
						uni.setLocale('zh-Hant');
						this.$i18n.locale = 'zh-Hant';
						break;
					case 3:
						uni.setLocale('jap');
						this.$i18n.locale = 'jap';
						break;
					case 4:
						uni.setLocale('kor');
						this.$i18n.locale = 'kor';
						break;
					case 5:
						uni.setLocale('thailand');
						this.$i18n.locale = 'thailand';
						break;
					case 6:
						uni.setLocale('malaysia');
						this.$i18n.locale = 'malaysia';
						break;
					case 7:
						uni.setLocale('vietnam');
						this.$i18n.locale = 'vietnam';
						break;
					case 8:
						uni.setLocale('indonesia');
						this.$i18n.locale = 'indonesia';
						break;
					case 9:
						uni.setLocale('saudi');
						this.$i18n.locale = 'saudi';
						break;
					case 10:
						uni.setLocale('brazil');
						this.$i18n.locale = 'brazil';
						break;
					case 11:
						uni.setLocale('russia');
						this.$i18n.locale = 'russia';
						break;
					case 12:
						uni.setLocale('germany');
						this.$i18n.locale = 'germany';
						break;
					case 13:
						uni.setLocale('france');
						this.$i18n.locale = 'france';
						break;
					case 14:
						uni.setLocale('italy');
						this.$i18n.locale = 'italy';
						break;
					case 15:
						uni.setLocale('turkey');
						this.$i18n.locale = 'turkey';
						break;
					case 16:
						uni.setLocale('spain');
						this.$i18n.locale = 'spain';
						break;
					case 17:
						uni.setLocale('poland');
						this.$i18n.locale = 'poland';
						break;
					case 18:
						uni.setLocale('india');
						this.$i18n.locale = 'india';
						break;
					case 19:
						uni.setLocale('ukraine');
						this.$i18n.locale = 'ukraine';
						break;
				}
				this.select = index
				this.showLanguage = !this.showLanguage;

				uni.setStorageSync("langname", index);
				location.reload();
			},
			openWallet() {
				this.$emit('onOpen');
			},
			handleMaskClick() {

				this.$emit('close', {});
			},
			setLanguage(index) {
				// this.select = 1

				this.showLanguage = !this.showLanguage;
				// this.show = false
			},
			setAvatar() {
				this.show = true;
			},
			outWallet() {
				uni.setStorageSync("yy_wallet", '')
				uni.setStorageSync("yyui_token", '')
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			closeUpload() {
				this.show = false
			},
			changeAvatar() {
				let that = this;
				uni.chooseImage({
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					count: 1,
					success: (res) => {
						let max_size = 5 * 1024 * 1024;
						// #ifdef H5
						if (res.tempFiles[0].type.indexOf("image") < 0) {
							that.tui.toast(this.$t('chooseImg'));
							return;
						}
						// #endif

						if (res.tempFiles[0].size >= max_size) {
							that.tui.toast(this.$t('chooseImgMax'));
						}
						let token = that.tui.getToken();

						let datas = {
							token: token,
						};

						let uper = that.tui.uploadFile('/api/v1/uploads/uploads', datas, res.tempFilePaths[0],
							'');
						Promise.resolve(uper).then((value) => {

							if (value.state == 200) {
								this.avatar = yui.interfaceUrl() + value.result
								that.tui.setUserInfoData(this.avatar);
							}
						})
					},
					fail: (err) => {
						// #ifdef APP-PLUS
						if (err['code'] && err.code !== 0 && that.sourceTypeIndex === 2) {
							that.checkPermission(err.code);
						}
						// #endif

					}
				})
			},
		}
	};
</script>

<style scoped>
	@import '../../static/css/defalut.css';

	.amount {
		display: flex;
		flex-direction: row;


	}

	.tui-tabs-view {
		width: 100%;
		border-radius: 14rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-tabs-relative {
		position: relative;
	}

	.yui-tab-title-clove {}

	.yui-tabs-tags {
		display: block;
		margin-top: 4rpx;
		text-align: center;
		font-size: 24rpx;
	}

	.tui-tabs-fixed {
		position: fixed;
		left: 0;
	}

	.tui-tabs-fixed::before,
	.tui-tabs-relative::before {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5) translateZ(0);
		transform: scaleY(0.5) translateZ(0);
		transform-origin: 0 100%;
		bottom: 0;
		right: 0;
		left: 0;
	}

	.tui-unlined::before {
		border-bottom: 0 !important;
	}

	.tui-tabs-item {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-tabs-disabled {
		opacity: 0.6;
	}

	.tui-tabs-title {
		/* 	display: flex;
	align-items: center;
	justify-content: center; */
		text-align: center;
		position: relative;
		z-index: 2;
	}

	.tui-tabs-active {
		transition: all 0.15s ease-in-out;
	}

	.tui-tabs-slider {
		position: absolute;
		left: 0;
		transition: all 0.15s ease-in-out;
		z-index: 0;
		transform: translateZ(0);
	}
</style>